<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div>
  <table>
    <tr>
      <td>编号：</td>
      <td id="userId"></td>
    </tr>
    <tr>
      <td>姓名：</td>
      <td id="username"></td>
    </tr>
    <tr>
      <td>年龄：</td>
      <td id="age"></td>
    </tr>
  </table>

  <input type="text" id="usernameInput">
</div>


<script src="js/jquery-1.12.4.js"></script>
<script>
  var user = {
    id: 1,
    name: "张三",
    age: 23
  };


  function showUserInfo(user){
    $("#userId").html(user.id);
    $("#username").html(user.name);
    $("#age").html(user.age);
  }

  $(function () {
    // 页面加载的时候，找到要显示信息的地方，然后，把用户名取出来，显示到页面
    showUserInfo(user);

    // 在用户输入完成的时候，获取输入用户名，然后，修改对象本身的值，然后，再显示到页面
    $("#usernameInput").blur(function () {
      var username = $(this).val();
      user.name = username;

      showUserInfo(user);
    });
  });
</script>
</body>
</html>
